<template>
	<mescroll-uni :height="height + 'px'" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="black-list-item dis-flex flex-y-center" v-for="(item, index) in blackList" :key="item.black_id">
			<image class="black-list-face" :src="item.user.avatar" mode="aspectFill" />
			<view class="black-list-info black-list-info-single">
				<view class="black-list-name dis-flex  flex-y-center">{{ item.user.nickName }}</view>
			</view>
			<view class="black-list-btn" @tap.stop="onRmoveBlackListHandle" :data-index="index">移除</view>
		</view>
	</mescroll-uni>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import chatSessionItem from '@/components/chat/chat-session-item.vue';
import { mapState } from 'vuex';
export default {
	mixins: [MescrollMixin], // 使用mixin
	components: { chatSessionItem },
	props: {
		height: {
			default: null,
			type: [String, Number]
		}
	},
	data() {
		return {
			blackList: []
		};
	},
	computed: {
		...mapState({})
	},
	methods: {
		refreshData(){
			this.mescroll && this.mescroll.resetUpScroll(false);
		},
		upCallback(mescroll) {
			this.$u.api.getBlackList(mescroll.num, mescroll.size).then(res => {
				if (mescroll.num == 1) {
					this.blackList = res.data.list.data;
				} else {
					this.blackList.push(res.data.list.data);
				}
				this.mescroll.endBySize(res.data.list.data.length, res.data.list.total);
			});
		},
		onRmoveBlackListHandle(e) {
			const index = e.currentTarget.dataset.index;
			uni.showModal({
				title: '操作提示',
				content: `是否将 ${this.blackList[index].user.nickName} 移出黑名单`,
				showCancel: true,
				success: result => {
					if (result.confirm) {
						this.$u.api.outBlackList(this.blackList[index].user.user_id).then(res => {
							this.mescroll.resetUpScroll(true);
							this.$u.toast('已将对方移出黑名单');
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.black-list-item {
	height: 112rpx;
	padding: 0 32rpx;
	position: relative;
	background: rgba(255, 255, 255, 1);

	.black-list-face {
		width: 72rpx;
		height: 72rpx;
		border-radius: 72rpx;
		filter: grayscale(100%);
	}

	view.black-list-face {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(149, 84, 85);
		color: #fff;
		font-size: 38rpx;
	}

	.black-list-info {
		height: 80rpx;
		margin-left: 20rpx;
		margin-right: 40rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;

		&.black-list-info-single {
			justify-content: center;
		}

		.black-list-name {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 45rpx;
			@include ellipsis(1);
		}
	}

	.black-list-btn {
		padding: 8rpx 18rpx;
		font-size: 24rpx;
		border-radius: 6rpx;
		background-color: #ccc;
		color: #fff;
		opacity: 0.6;
	}
}
</style>
